<template>
	<!-- 定位 -->
	<view class="content">
		<view class="search-cont">
			<view class="search" @click="search">
				<view style="width: 20rpx;"></view>
				<image src="../../../static/icon/search.png"></image>
				<input type="text" placeholder="搜索商品  服饰/数码...." disabled style="margin-left: 10rpx;"/>
			</view>
		</view>
		<view class="tab-cont">
			<view class="title-bar">
				<view :class="selIndex==n?'selIndex':''" v-for="(i,n) in titleList" @click="tabClick(i,n)" :key="n">{{ i }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from "../../../store/index.js"
	export default {
		components:{
			
		},
		data(){
			return {
				selIndex: 0,
				titleList: ['首页', '活动', '服饰', '百货', '数码','居家','箱包'],
			}
		
		},
		methods:{
			tabClick(tab,num){
				this.selIndex = num
				this.$emit("tabClick",tab)
			},
			search(){
				uni.reLaunch({
					url:"/pages/common/search",
					success() {
						store.commit("router","/pages/index/index")
					}
				})
			}
		},
	}
	
</script>

<style scoped>
	/* 搜索 */
	.search image{
		display: flex;
		margin-top: 10rpx;
		width: 50upx;
		height: 50upx;
		
	}
	.search input{
		width: 100%;
		height: 70upx;
		line-height: 70upx;
		
		
	}
	.search{
		display: flex;
		height: 70upx;
		line-height: 70upx;
		background-color: #F2F3F4;
		border-radius: 20rpx;	
	}
	.search-cont{
		margin-top: 20rpx;
		width: 100%;
		height: 70upx;
	}
	/* tab分类 */
	.tab-cont{
		display: flex;
		margin-top: 20rpx;
	}
	.title-bar {
	    width: 100%;
	    height: 40px;
	    font-size: 15px;
	    display: flex;
	    align-items: center;
	    justify-content: space-around;
	}
	
	.selIndex {
	    color: red;
	}
	
	.tab-scroll-view {
	    width: 750rpx;
	    height: 100vh;
	    flex-direction: row;
	    white-space: nowrap;
	}
	
	.tab-item {
	    display: inline-block;
	    width: 100vw;
	    height: 100%;
	    font-size: 16px;
	    color: #555;
	    border: 1px solid yellow;
	    transition: all .5 ease-in-out;
	}
	
	
</style>

 